<template>
	<div class="sys-container">
		<el-dialog v-model="state.isShowDialog" draggable width="769px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
					</el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="Pid" prop='mediaToucherId'
							:rules="[{ required: true, message: '媒体触点不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.selectedMediaToucher" value-key="value" placeholder="请选择"
								class="w100" allow-create filterable>
								<el-option v-for='item in state.mediaToucherDict' :key='item.value' :label='item.label'
									:value='item' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="产品名称" prop='productId'
							:rules="[{ required: true, message: '媒体产品不能为空', trigger: 'blur' }]">
							<el-select v-model.trim="state.selectedProduct" value-key="value" placeholder="请选择"
								class="w100" allow-create filterable>
								<el-option v-for='item in state.productDict' :key='item.value' :label='item.label'
									:value='item' />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sort">
							<el-input-number v-model.trim="state.ruleForm.sort" placeholder="请输入排序" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="权重" prop="weight">
							<el-input-number v-model.trim="state.ruleForm.weight" placeholder="请输入权重" :min="0"
								controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="报警用户" prop="weight">
							<el-input-number v-model.trim="state.ruleForm.alarmSubscribeUser" placeholder="请输入报警订购用户"
								:min="0" controls-position="right" class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="当日同步" prop="controlLevel">
							<el-radio-group v-model="state.ruleForm.syncPlanDaily" class="ml-4">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!--  -->

	</div>
</template>

<script lang="ts" setup name="addDiToucherProductPlan">
import { reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';

import { DiToucherProductPlan } from '/@/api/models';
import SysDiToucherProductPlanApi from '/@/api/delivery/toucherProductPlan';
import SysDiCustomerProductApi from '/@/api/delivery/customerProduct';
import SysDiMediaToucherApi from '/@/api/delivery/mediaToucher';
import { optionDict } from '/@/const/dict';
import request from '/@/utils/request';

const props = defineProps({
	title: String,
});

const ruleFormRef = ref();
const state = reactive({
	selectedProduct: undefined,
	selectedMediaToucher: undefined,
	productDict: [],
	mediaToucherDict: [],
	isShowDialog: false,
	ruleForm: {} as DiToucherProductPlan,
	isDisplayed: false,
	phone: '',
	code: '',
	information: '',
	codeInformation: ''
});

// 打开弹窗
const openDialog = async (row: DiToucherProductPlan, data) => {
	if (data == 'update') {
		await productDictQuery();
		await mediaToucherDictQuery();
		state.ruleForm = row;
		state.isShowDialog = true;
		state.isDisplayed = true;
	} else {
		state.isDisplayed = false;
		await productDictQuery();
		await mediaToucherDictQuery();
		state.ruleForm = row;
		state.isShowDialog = true;
	}
};

// 关闭弹窗
const closeDialog = () => {
	mittBus.emit('submitRefresh');
	state.isShowDialog = false;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = () => {
	state.ruleForm.productId = state.selectedProduct?.value;
	state.ruleForm.mediaToucherId = state.selectedMediaToucher?.value;
	state.ruleForm.pid = state.selectedMediaToucher?.label;
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;

		await SysDiToucherProductPlanApi().addPost(state.ruleForm);
		//
		// if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
		// 	await SysDiToucherProductPlanApi().editPost(state.ruleForm);
		// } else {
		// 	await SysDiToucherProductPlanApi().addPost(state.ruleForm);
		// }
		closeDialog();
	});
};



// 媒体列表
const productDictQuery = async () => {
	await SysDiCustomerProductApi().queryAll({ status: 1 }).then((res) => {
		if (res.data.resCode === '0000')
			state.productDict = res.data.result ?? [];
	});
};

// 媒体触点列表
const mediaToucherDictQuery = async () => {
	await SysDiMediaToucherApi().queryAll({ status: 1 }).then((res) => {
		if (res.data.resCode === '0000')
			state.mediaToucherDict = res.data.result ?? [];
	});
};

// 导出对象
defineExpose({ openDialog });
</script>
